<template>
  <div class="app-container" >
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="关键字:" prop="keyWord">
        <el-input
          v-model="queryParams.keyWord"
          placeholder="请通过关键词搜索"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="所属行业:" prop="industry">
        <el-select
          v-model="queryParams.industry"
          clearable
          placeholder="请选择所属行业"
        >
          <el-option
            v-for="(item, index) in industrys"
            :key="index"
            :label="item.content"
            :value="item.cid"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="getBirthDay()"
          >近七日过生会员({{ message.birthdayNum }})</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="addMember()"
          style="margin-bottom: 10px;"
          >新增会员</el-button
        >
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <div class="typeButton"  style="display: flex;">
      <button style="width:110px;" @click="chooseStatus(0)" :class="{ active:queryParams.status == 0 }">全部</button>
      <button style="width:110px;margin-left: 0px;" @click="chooseStatus(1)" :class="{ active:queryParams.status == 1}">待审核({{ memberNum.unExamine }})</button>
      <button style="width:100px;margin-left: 0px;" @click="chooseStatus(3)" :class="{ active:queryParams.status == 3}">未通过</button>
      <button style="width:110px;margin-left: 0px;" @click="chooseStatus(2)" :class="{ active:queryParams.status == 2}">已通过</button>
    </div>
    <el-table v-loading="fullscreenLoading" :data="memberList" element-loading-text="正在给您重新排序,请稍作等待...">
      <el-table-column label="序号" align="center" >
        <template slot-scope="scope">
          <el-input  class="input" @blur="changeSort(scope.row)" @focus="oldSort = scope.row.sort" v-model="scope.row.sort"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="任职情况"
        align="center"
        prop="employmentSituation"
      />
      <el-table-column label="成员名称" align="center" prop="memberName">
        <template slot-scope="scope">
          <span v-if="!scope.row.warn">{{ scope.row.memberName }}</span>
          <span v-if="scope.row.warn == '1'" style="color:red;" title="该会员即将到期">{{ scope.row.memberName }}</span>
        </template>
        </el-table-column>
      <el-table-column label="年龄" align="center" prop="age" />
      <el-table-column label="生日" align="center" prop="memberBirthday" />
      <el-table-column
        label="文化程度"
        align="center"
        prop="educationalLevel"
      />
      <el-table-column
        label="政治面貌"
        align="center"
        prop="politicalLandscape"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.politicalLandscape == 104">中国共产党</span>
          <span v-if="scope.row.politicalLandscape == 105">国民党</span>
          <span v-if="scope.row.politicalLandscape == 106">民盟</span>
          <span v-if="scope.row.politicalLandscape == 107">民建</span>
          <span v-if="scope.row.politicalLandscape == 108">民主促进会</span>
          <span v-if="scope.row.politicalLandscape == 109">中国农工民主党</span>
          <span v-if="scope.row.politicalLandscape == 110">致公党</span>
          <span v-if="scope.row.politicalLandscape == 111">九三学社</span>
          <span v-if="scope.row.politicalLandscape == 112"
            >台湾民主自治同盟</span
          >
          <span v-if="scope.row.politicalLandscape == 113">群众</span>
          <span v-if="scope.row.politicalLandscape == 114">{{
            scope.row.otherPolitical
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工作单位" align="center" prop="workUnit" />
      <el-table-column label="职务" align="center" prop="duties" />
      <el-table-column label="联系电话" align="center" prop="phone" />
      <el-table-column label="浏览次数" align="center" prop="browseNumber" />
      <el-table-column label="到期时间" align="center" prop="expirationTime">
        <template slot-scope="scope">
          {{ scope.row.expirationTime || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="会员状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0">未提交申请</el-tag>
          <el-tag type="warning" v-if="scope.row.status === 1">申请中</el-tag>
          <el-tag type="success" v-if="scope.row.status === 2">已通过</el-tag>
          <el-tag type="danger" v-if="scope.row.status === 3">已拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="getMember('allow', scope.row.mid)"
            v-if="scope.row.status == 1"
            v-hasPermi="['member:auditingMember:check']"
            >审核</el-button
          >
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.status != 1"
            @click="getMember('look', scope.row.mid)"
            v-hasPermi="['member:auditingMember:check']"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="getMember('edit', scope.row.mid)"
            v-hasPermi="['member:editMember:edit']"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  memberList,
  getCondition,
  delKeyword,
  keywordList,
  saveMember,
  sort,
  getStatusNum
} from "@/api/member";

export default {
  data() {
    return {
      logrules: {},
      // 遮罩层
      loading: true,
      // 选中数组
      sid: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      //关键词
      keyword: "",
      //选中成员No
      memberNo: "",
      // 总条数
      total: 0,
      // 角色表格数据
      memberList: [],
      //会员数量
      memberNum:[],
      //关键词列表
      keywordList,
      //行业数据
      industrys: [],
      //可看
      inputVisible: false,
      //填写的数据
      inputValue: "",
      // 查询参数
      queryParams: {
        memberBirthday: "",
        pageSize: 10,
        pageNum: 1,
        keyWord: "",
        industry: "",
        memberNo: "",
        status: "",
      },
      //今日消息数据
      message: {
        birthdayNum: "",
      },
      //月日
      month: new Date().getMonth() + 1,
      daith: new Date().getDate(),
      //排序前的值
      oldSort:'',
      //排序后的值
      newSort:'',
      //屏幕加载
      fullscreenLoading: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      let params = this.queryParams;
      memberList(params).then((res) => {
        if (res.code === 200) {
          this.total = res.total;
          this.memberList = res.rows;
          let timestamp = new Date().getTime()
          this.memberList.forEach((item, index) => {
            this.$set(item, "age", this.getAge(item.memberBirthday));
            //判断性别
            if (item.memberSex == 0) {
              item.memberSex = "女";
            } else if (item.memberSex == 1) {
              item.memberSex = "男";
            }
            //判断今日多少人过生
            this.message.birthdayNum = res.rows[0].birthdayCount;
            //判断到期时间标红
            if(item.expirationTime != '' && Date.parse(item.expirationTime) > timestamp){
              if(Date.parse(item.expirationTime) - timestamp < 604800000){
              this.$set(item, "warn", '1');
            }
            }
          });
        }
      });
      getCondition().then((res) => {
        this.industrys = res.data.industrys;
      });
      getStatusNum().then((res)=>{
        this.memberNum = res.data
      })
      this.loading = false;
    },
    getMember(data, mid) {
      if (data == "allow") {
        this.$router.push({
          path: "/member/auditingMember",
          query: { key: mid },
        });
      } else if (data == "edit") {
        this.$router.push({ path: "/member/editMember", query: { key: mid } });
      } else if (data == "look") {
        this.$router.push({
          path: "/member/auditingMember",
          query: { key: mid, status: 1 },
        });
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      (this.queryParams = {
        memberBirthday: "",
        pageSize: 10,
        pageNum: 1,
        keyWord: "",
        industry: "",
        memberNo: "",
        status: "",
      }),
        (this.memberNo = "");
      this.handleQuery();
    },
    //检测排序变化
    updateSort(newSort){
      let params = {
        oldSort:this.oldSort,
        newSort:Number(newSort)
      }
      this.fullscreenLoading = true;
      sort(params).then(res =>{
        if(res.code == 200){
          this.getList()
          this.oldSort = ''
          this.fullscreenLoading = false
          this.$message({
            type: 'success',
            message: '更改成功!'
          });
        }
      })
      
    },
    //计算年龄
    getAge(birth) {
      if (birth) {
        let today = new Date(); // 获取当前日期时间
        let birthdate = new Date(birth); // 将生日字符串转换为日期格式

        let age = today.getFullYear() - birthdate.getFullYear(); // 根据年份计算年龄

        if (today < birthdate || today.getMonth() < birthdate.getMonth()) {
          age--; // 如果今天的月份小于生日的月份或者今天的日期小于生日的日期，则年龄需要减1
        }
        return age;
      } else {
        return null;
      }
    },
    //获取生日用户
    getBirthDay() {
      this.queryParams.memberBirthday = 1;
      this.getList();
    },
    //
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        let data = {
          memberNo: this.memberNo,
          keyword: inputValue,
        };
        this.keywordList.push(data);
        this.getaddKeyword(data);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    //新增会员
    addMember(){
      saveMember().then(res=>{
        if(res.code == 200){
          this.$router.push({
          path: "/member/addMember",
          query: { key: res.data.mid }
        });
        }
      })
    },
    //更改序号
    changeSort(data){
      this.$confirm('是否将'+data.memberName+'的序号从'+this.oldSort+'改为'+data.sort+'?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.updateSort(data.sort)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消更改'
          });          
        });
    },
    //选择状态
    chooseStatus(data) {
      this.queryParams.status = data
      this.getList()
    },
  },

};
</script>
<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.el-form-item{
  margin-right: 40px;
}
::v-deep .el-input--medium .el-input__inner {
    height: 36px;
    line-height: 36px;
    width: 50px;
    padding: 10px;
    border: none;
}
::v-deep .el-table__row:hover{
  background: white;
}
.active{
  border-bottom: none;
  background-color: #E8F4FF !important;
  color:#1890FF !important;
}
.typeButton button{
  height: 40px;
  outline:none;
  font-size:13px;
  font-weight: 600;
  border:none;
  font-family:"microsoft YaHei";
  color:#606266;
}
.typeButton{
  margin-bottom: 3px;
}
.warn{
  color:red;
}
</style>
